<div class="row tile">
    <div class="col-md-12 col-md-auto">
        <div class="ibox float-e-margins">
            <h3 class="ibox-title"></h3>
            <div class="ibox-content">
                &lt;form class="form-horizontal"&gt;
                    <div class="form-group">
                        &lt;label class="control-label font-bold" langtag="word-scheme"&gt;&lt;/label&gt;
                        <div class="col-sm-10">
                            <span class="help-block m-b-none font-bold"></span>:
                            <span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </span>
                            &lt;select class="form-control" name="type" id="type"&gt;
                                &lt;option value="tcp" langtag="scheme-tcp"&gt;&lt;/option&gt;
                                &lt;option value="udp" langtag="scheme-udp"&gt;&lt;/option&gt;
                                &lt;option value="httpProxy" langtag="scheme-httpProxy"&gt;&lt;/option&gt;
                                &lt;option value="socks5" langtag="scheme-socks5"&gt;&lt;/option&gt;
                                &lt;option value="secret" langtag="scheme-secret"&gt;&lt;/option&gt;
                                &lt;option value="p2p" langtag="scheme-p2p"&gt;&lt;/option&gt;
                                {{/*&lt;option value="file" langtag="scheme-file"&gt;&lt;/option&gt;*/}}
                            &lt;/select&gt;
                        </div>
                    </div>

                    <div class="form-group">
                        &lt;label class="control-label font-bold" langtag="word-clientid"&gt;&lt;/label&gt;
                        <div class="col-sm-10">
                            <input class="form-control" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        &lt;label class="control-label font-bold" langtag="word-remark"&gt;&lt;/label&gt;
                        <div class="col-sm-10">
                            <input class="form-control" type="text">
                        </div>
                    </div>
                    {{if eq true .allow_multi_ip}}
                        <div class="form-group">
                            &lt;label class="control-label font-bold" langtag="word-serverip"&gt;&lt;/label&gt;
                            <div class="col-sm-10">
                                <input class="form-control" type="text">
                            </div>
                        </div>
                    {{end}}
                    <div class="form-group">
                        &lt;label class="control-label font-bold" langtag="word-serverport"&gt;&lt;/label&gt;
                        <div class="col-sm-10">
                            <input class="form-control" type="text">
                        </div>
                    </div>

                    {{if eq true .allow_local_proxy}}
                        <div class="form-group">
                            &lt;label class="control-label font-bold" langtag="word-proxytolocal"&gt;&lt;/label&gt;
                            <div class="col-sm-10">
                                &lt;select class="form-control" name="local_proxy"&gt;
                                    &lt;option value="0" langtag="word-no"&gt;&lt;/option&gt;
                                    &lt;option value="1" langtag="word-yes"&gt;&lt;/option&gt;
                                &lt;/select&gt;
                            </div>
                        </div>
                    {{end}}

                    <div class="form-group">
                        &lt;label class="control-label font-bold" langtag="word-target"&gt;&lt;/label&gt;
                        <div class="col-sm-10">
                            &lt;textarea class="form-control" name="target" rows="4" placeholder=""
                                      langtag="info-suchasiplist"&gt;&lt;/textarea&gt;
                            <span class="help-block m-b-none"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        &lt;label class="control-label font-bold" langtag="word-localpath"&gt;&lt;/label&gt;
                        <div class="col-sm-10">
                            <input class="form-control" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        &lt;label class="control-label font-bold" langtag="word-stripprefix"&gt;&lt;/label&gt;
                        <div class="col-sm-10">
                            <input class="form-control" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        &lt;label class="control-label font-bold" langtag="word-identificationkey"&gt;&lt;/label&gt;
                        <div class="col-sm-10">
                            <input class="form-control" type="text">
                            <span class="help-block m-b-none"></span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-2">
                            &lt;button class="btn btn-success" type="button"
                                    onclick="submitform('add', '{{.web_base_url}}/index/add', $('form').serializeArray())"&gt;
                                <i class="fa fa-fw fa-lg fa-check-circle"></i> <span></span>
                            &lt;/button&gt;
                        </div>
                    </div>

                &lt;/form&gt;
            </div>
        </div>
    </div>
</div>
&lt;script&gt;
    var arr = []
    arr["all"] = ["port", "target", "password", "local_path", "strip_pre", "local_proxy", "client_id", "server_ip"]
    arr["tcp"] = ["port", "target", "local_proxy", "client_id", "server_ip"]
    arr["udp"] = ["port", "target", "local_proxy", "client_id", "server_ip"]
    arr["socks5"] = ["port", "client_id", "server_ip"]
    arr["httpProxy"] = ["port", "client_id", "server_ip"]
    arr["secret"] = ["target", "password", "client_id", "server_ip"]
    arr["p2p"] = ["target", "password", "client_id", "server_ip"]
    arr["file"] = ["port", "local_path", "strip_pre", "client_id", "server_ip"]

    function resetForm() {
        $(".form-group[id]").css("display", "none");
        $("#usecase span").css("display", "none");
        o = $("#type").val();
        $('#case' + o).css("display", "inline")
        for (var i = 0; i &lt; arr[o].length; i++) {
            $("#" + arr[o][i]).css("display", "block")
        }
    }

    $(function () {
        $("#type").val(('{{.type}}' == '') ? 'tcp' : '{{.type}}');
        resetForm()
        $("#type").on("change", function () {
            resetForm()
        })
        $("#use_client").on("change", function () {
            resetForm()
        })
    })
&lt;/script&gt;
